<template>
  <!-- 临时数据预览的 -->
  <div style="height: 95%">
    <el-table
        style="height:90%"
      :data="DataPreview.records"
        :height="height"
      border
     >
      <el-table-column
      v-for="(item,index) in DataPreview.records[0]" :key="index"
        :prop="index"
        :label="item.fldShowname || index"
        height="30"
        >
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 25, 50, 100]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="DataPreview.recordNumber">
      </el-pagination>
    </div>
</div>
</template>

<script>
  export default {
    data () {
      return {
        currentPage: 1, // 默认显示第1页面
        pageNum: 1, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
        pageSize: 15// 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
      }
    },
    props: {
      DataPreview: {
        records: []
      },
        height: {
          type: Number,
          default: window.innerHeight - 350
        }
      },

    methods: {
      // 改变页大小时调用父组件方法
       handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
      },
      // 改变页码时调用父组件方法
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.$emit('getData', {pageNum: this.pageNum, pageSize: this.pageSize})
      },
      addGather () {
        console.log('保存')
      }
    }
  }
</script>
